<template>
    <div class="stars-wrappe">
        <span :class="['iconfont icon-stars', {active: starsNum >= 1}]"></span>
        <span :class="['iconfont icon-stars', {active: starsNum >= 2}]"></span>
        <span :class="['iconfont icon-stars', {active: starsNum >= 3}]"></span>
        <span :class="['iconfont icon-stars', {active: starsNum >= 4}]"></span>
        <span :class="['iconfont icon-stars', {active: starsNum >= 5}]"></span>
    </div>
</template>

<script>
export default {
    name: 'Stars',
    props: {
        starsNum: Number
    }
}
</script>

<style lang="scss" scoped>
@import '~styles/variables.scss';
.stars-wrapper {
    color: #ccc;

    .active {
        color: $startColor;
    }
}
</style>